<%-- 
    Document   : perfil
    Created on : 26/02/2012, 17:20:34
    Author     : Leonardo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setLocale scope="session" value="${param['language']}" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Perfil</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
         
   <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    <link href="css/prefs.css" rel="stylesheet">
    
 <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
        </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
  </head>

  <body data-spy="scroll" data-target=".subnav" data-offset="50">


  <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#" style=" color: #FFFFFF; display: block; float: left; font-size: 20px; font-weight: 200; line-height: 1; margin-left: -20px; padding: 8px 20px 12px;"><fmt:message key="index.title_projeto" /></a>
                    <div class="nav-collapse">
                         <ul class="nav">
                            <li class="divider-vertical"></li>
                            <li class="active"><a href="#">Home</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">About</a></li>
                            <li class="divider-vertical"></li>
                            <li><a data-controls-modal="windowLoginDialog"><fmt:message key="index.login"/></a></li>
                            <li class="divider-vertical"></li>
                        </ul>
                        <ul class="nav" style="float: right">
                            <li class="divider-vertical"></li>
                            <li class="dropdown" style="float: right">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><fmt:message key="index.idiomas"/><b class="caret"></b></a>
                                <ul id="menu2" class="dropdown-menu">
                                    <li><a href="?language=en"><fmt:message key="drop.ingles"/></a></li>
                                    <li><a href="?language=pt"><fmt:message key="drop.portugues"/></a></li>
                                    <li><a href="?language=es"><fmt:message key="drop.espanhol"/></a></li>
                                    <li><a href="?language=it"><fmt:message key="drop.italiano"/></a></li>
                                    <li class="divider"></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>                                           
<!-- Masthead
================================================== -->
<div class="jumbotron subhead" id="overview"> 
  <div class="subnav subnav-fixed">
    <ul class="nav nav-pills">
      <li><a href="#"><i class="icon-user"></i> Leonardo Zertus</a></li>
      <li><a href="#"><i class="icon-th-large"></i>&nbsp;Mural</a></li>
      <li><a href="#"><i class="icon-cog"></i> Configurações</a></li>
      <li><a href="#"><i class="icon-tags"></i> Tags</a></li>
      <li><a href="#"><i class="icon-comment"></i> Comentários</a></li>
      <li><a href="#"><i class="icon-camera"></i> Fotos</a></li>
      <li><i>&nbsp;<input type="text" class="" style="margin-top: 4px;">&nbsp;<button type="submit" class="btn-info" style="margin-bottom: 5px;"><i class="icon-search icon-white"></i> Procurar</button></i></li>
    </ul>

  </div>
</div>
<!-- Lado página -->
<div id="framecontentLeft">
<div class="innertube"> 
    <div class="foto">
        <img src="imagens/jo.jpg" width="115" height="115" alt="João"/>
     </div>  
    <br><br><br><br><br><br><br><br>
    <ul class="nav navs-list">
    <li class="nav-header">Configurações</li>
    <li><a href="#"><i class="icon-cog"></i>Settings</a></li>
    <li><a href="#"><i class="icon-th-list"></i>Mural</a></li>
    <li><a href="#"><i class="icon-camera"></i>Fotos</a></li>
    <li><a href="#"><i class="icon-comment"></i>Comentários</a></li>
    <li class="nav-header">Favotitos</li>
    <li><a href="#"><i class="icon-th"></i>Minha Salas</a></li>
    <li><a href="#"><i class="icon-tags"></i>Tags</a></li>
    <li class="nav-header">Outros</li>
    <li><a href="#"><i class="icon-flag"></i>Ajuda</a></li>    
    </ul>
</div>
</div>

<div id="framecontentRight">
<div class="innertube">
    <ul class="thumbnails">
    <li class="span3">
    <br>    
    &nbsp;<img src="imagens/t2s.png" width="115" height="115" alt="">
    </li>
    </ul>
    <br>
    <ul class="thumbnails">
    <li class="span3">
    <br>    
    &nbsp;<img src="http://placehold.it/260x180" width="115" height="115" alt="">
    </li>
    </ul>
    <br>
    <ul class="thumbnails">
    <li class="span3">
    <br>    
    &nbsp;<img src="http://placehold.it/260x180" width="115" height="115" alt="">
    </li>
    </ul>
    <br>
    <ul class="thumbnails">
    <li class="span3">
    <br>    
    &nbsp;<img src="http://placehold.it/260x180" width="115" height="115" alt="">
    </li>
    </ul>
</div>
</div>

<!-- Meio da página - onde vão as mensagens-->
 <div id="maincontent-perfil">
     <div class="maincontent-fotos well">
         <br>
         <form class="form-inline" style="margin-top: 5px; margin-left: 100px;">
    <input type="text" class="span3" placeholder="Conte suas novidades..">
    <button type="submit" class="btn">Go</button>
    </form>
         </div>
     <div id="maincontent-lado1">
         
         <h3 align="center">&nbsp;Mural da Pessoa</h3>
         </div>
     <div id="maincontent-lado2">
         <br>
         <h3 align="center">&nbsp;Aba de novas Salas<br>&nbsp; Atualizações de amigos</h3>
         </div>
<div class="innertube">
    

</div>
</div>
    






    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
     <script src="./resources/jquery.js"></script>
        <script src="./resources/bootstrap-transition.js"></script>
        <script src="./resources/bootstrap-alert.js"></script>
        <script src="./resources/bootstrap-modal.js"></script>
        <script src="./resources/bootstrap-dropdown.js"></script>
        <script src="./resources/bootstrap-scrollspy.js"></script>
        <script src="./resources/bootstrap-tab.js"></script>
        <script src="./resources/bootstrap-tooltip.js"></script>
        <script src="./resources/bootstrap-popover.js"></script>
        <script src="./resources/bootstrap-button.js"></script>
        <script src="./resources/bootstrap-collapse.js"></script>
        <script src="./resources/bootstrap-carousel.js"></script>
        <script src="./resources/bootstrap-typeahead.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                function closeDialog () {
                    $('#windowLoginDialog').modal('hide');
                };
                function okClicked () {
                    alert("Em Construção");
                    $('#windowLoginDialog').modal('hide');
                };
        </script>
        <!-- Instancia as Tooltips -->
        <script type="text/javascript">
                    !function($){
                    $(function (){
                        $('a[rel=tooltip]').tooltip();
                    });
                }( window.jQuery )
        </script>
        <!--        fim                -->
        <script type="text/javascript">
                document.title = "(3) "+document.title;
        </script>
        <div id="windowLoginDialog" class="modal hide fade" style="display: none; ">
            <div class="modal-header">
                <a href="http://bootstrapmodaldemo.scripting.com/#" class="close">×</a>
                <h3><fmt:message key="index.login"/></h3>
                <h4>Digite seu e-mail e sua senha para efetuar seu Login.</h4>
            </div>
            <div class="modal-body">
                <ul>
                    <li>
                        <div class="divDialogElements">
                            <input class="xlarge" id="user_email" name="user_email" type="Email" placeholder="Email">
                        </div>
                    </li>
                    <li>
                        <div class="divDialogElements">
                            <input id="user_password" name="user_password" type="password" placeholder="Password">
                        </div>
                    </li>
                </ul>
            </div>

            <div class="modal-footer">
                <a href="#" class="btn primary" onclick="okClicked ();"><fmt:message key="btn.ok"/></a>
                <a href="#" class="btn secondary" onclick="closeDialog ();"><fmt:message key="btn.cancel"/></a>
            </div>
        </div>

    <!-- Analytics
    ================================================== -->
    <script>
      var _gauges = _gauges || [];
      (function() {
        var t   = document.createElement('script');
        t.type  = 'text/javascript';
        t.async = true;
        t.id    = 'gauges-tracker';
        t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
        t.src = '//secure.gaug.es/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(t, s);
      })();
    </script>
  </body>
</html>
